<template>
  <div class="userPhoto" @click="dialogVisible = true">
    <img src="@/assets/images/avator.jpg" alt="" />
  </div>
  <AvatarCropper
    v-if="dialogVisible"
    :dialogVisible="dialogVisible"
    @closeAvatarDialog="closeAvatarDialog"></AvatarCropper>
</template>
  
  <script  setup>
import { ref, reactive } from 'vue';
import AvatarCropper from '@/components/avatarCropper.vue';
const dialogVisible = ref(false);
// 关闭弹框所触发的事件
const closeAvatarDialog = (data) => {
  dialogVisible.value = false;
};
</script>
  